<template>
  <div class="app-container">
    <div class="block">
      <el-row>
        <el-col :span="24">
          <el-button type="success" size="mini" icon="el-icon-edit" @click.native="openSendOutForm"
                     v-show="form.statusName =='待发货'">发货
          </el-button>
          <el-button type="default" size="mini" @click="printOrder">打 印</el-button>
        </el-col>
      </el-row>
    </div>
    <el-form ref="print" label-width="150px">
      <el-row>
        <h3>基本信息</h3>
        <el-col :span="12">
          <el-form-item label="订单号">
            <span> {{ form.orderSn}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单用户">
            <router-link :to="{ name: 'ShopUserDetail', query: { id: form.idUser } }">
              {{form.mobile}}
            </router-link>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <span> <strong>{{ form.statusName }} </strong></span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单备注">
            <span>{{ form.message }} </span>
          </el-form-item>
        </el-col>
        <h3>收货信息</h3>
        <el-col :span="12">
          <el-form-item label="收货人">
            <span>{{ form.consignee}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话">
            <span>{{ form.mobile}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收货地址">
            <span>{{ form.consigneeAddress}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <h3>订单明细</h3>
        </el-col>
        <el-table :data="form.items" border fit>
          <el-table-column label="商品">
            <template slot-scope="scope">
              <router-link :to="{ name: 'GoodsEdit', query: { id: scope.row.idGoods} }">
                {{scope.row.title}}
              </router-link>
            </template>
          </el-table-column>
          <el-table-column label="图片">
            <template slot-scope="scope">
              <img :src="scope.row.picOssUrl" style="width:50px;">
            </template>
          </el-table-column>
          <el-table-column label="价格">
            <template slot-scope="scope">
              {{formatPrice(scope.row.price)}}
            </template>
          </el-table-column>
          <el-table-column label="数量">
            <template slot-scope="scope">
              {{scope.row.count}}
            </template>
          </el-table-column>
          <el-table-column label="合计">
            <template slot-scope="scope">
              {{ formatPrice(scope.row.totalPrice)}}
            </template>
          </el-table-column>
          <el-table-column label="">
            <!--todo 打印的时候总是无法打印表格最后一列，此列用于占位-->
          </el-table-column>
        </el-table>
        <el-col :span="8">
          <el-form-item label="总金额">
            <span>{{formatPrice(form.totalPrice)}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="优惠券抵扣金额">
            <span> {{formatPrice(form.couponPrice)}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实付金额">
            <span>{{formatPrice(form.realPrice)}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog
      title="发货"
      :visible.sync="shipping.show"
      width="40%">
      <el-form ref="form" :model="shipping" label-width="200px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="快递公司">
              <el-select v-model="shipping.idExpress" placeholder="请选择">
                <el-option
                  v-for="item in expressList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="快递单号">
              <el-input v-model="shipping.shippingSn" minlength=1></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="sendOut">{{ "提交" }}</el-button>
          <el-button @click.native="shipping.show = false">{{ "取消" }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listShopOrder,
    getShopOrder,
    delShopOrder,
    addShopOrder,
    updateShopOrder,
    getInfoByOrderSn,
    sendOut
  } from "@/api/shop/shopOrder";
  import { listShopExpress, getShopExpress, delShopExpress, addShopExpress, updateShopExpress } from "@/api/shop/shopExpress";

  export default {
    name: "detail",
    data() {
      return {
        form: {user: {id: '', name: ''}, address: {name: '', tel: '', addressDetail: ''}},
        expressList: [],
        shipping: {
          show: false,
          id: '',
          idExpress: '',
          shippingSn: ''
        }
      }
    },
    created() {
      this.form.orderSn = this.$route.query.orderSn
      this.init()
    },
    methods: {
      init() {
        this.fetchData()
      },
      fetchData() {
        if (this.form.orderSn) {
          getInfoByOrderSn(this.form.orderSn).then(response => {
              this.form = response.data
            }
          )
        }
      },
      openSendOutForm() {
        if (this.expressList.length == 0) {
          listShopExpress({pageNum: 1,pageSize: 30}).then(response => {
            this.expressList = response.rows;
          });
        }
        this.shipping.show = true
      },
      sendOut() {
        this.$confirm("确认该操作？", "提示", {
          confirmButtonText: "提交",
          cancelButtonText: "取消",
          type: 'warning'
        }).then(() => {
          sendOut(this.form.id, this.shipping.idExpress, this.shipping.shippingSn).then(response => {
            this.fetchData()
            this.shipping.show = false
            this.$message({
              message: '发货成功',
              type: 'success'
            })
          })
        }).catch(() => {
        })
      },
      formatPrice(price) {
        if (price) {
          return '￥' + (price / 100).toFixed(2)
        }
        return ''
      },
      printOrder() {
        this.$print(this.$refs.print)
      }
    }
  }
</script>

<style scoped>
  a {
    color: lightblue;
    text-decoration: underline;
  }
</style>
